<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1>战报</h1>
    </div>
    <div class="panel">
      <div class="battle">
        <p>{{ res.attackTime | formatTime }}</p>
        <div class="bat">
          <div class="attack">
            <img :src="res.attackerImg" :style="{background: '#eafee1'}">
            <p>[攻]{{ res.attacker }}</p>
          </div>
          <div class="result">
            <img :src="`/static/result-${res.reslut}.svg`">
            <p>攻击{{res.reslut == 1 ? '成功' : '失败'}}</p>
          </div>
          <div class="defense">
            <img :src="res.castleImg" :style="{background: '#eafee1'}">
            <p>[防]{{ res.castleName }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="fight">
        <h4 class="attack">攻方（{{ res.attacker }}）：</h4>
        <ul>
          <li v-for="(item,index) in res.attackList" :key="index">
            <div class="left">
              <router-link :to="`/monkey/${item.monkeyId}`" tag="div">
                <img :src="item.attackImg" :style="{background: item.attackBackground}">
              </router-link>
              <div>
                <p>#{{ item.monkeyId }}·{{ item.generation }}代</p>
                <p>攻:{{ item.aggressivity }}/HP:{{ item.weight | toFix(1) }}</p>
              </div>
            </div>
            <div class="text-right">
              <p>输出：{{ item.round }}回合（{{ item.damageValue | toFix(1) }}伤害）</p>
              <p><i class="herb" v-if="item.usedMagicHerb"></i>剩余HP:{{ item.endWeight | toFix(1) }} <span :style="{color: color[item.endStatus]}">（{{status[item.endStatus]}}）</span></p>
            </div>
          </li>
        </ul>
      </div>
      <div class="fight">
        <h4 class="defense">守方（{{ res.defender }}）：</h4>
        <ul>
          <li v-for="(item,index) in res.defenseList" :key="index">
            <div class="left">
              <router-link :to="`/tower/${item.monkeyId}`" tag="div" v-if="index == 0">
                <img :src="res.castleImg" :style="{background: '#eafee1'}">
              </router-link>
              <router-link :to="`/monkey/${item.monkeyId}`" tag="div" v-else>
                <img :src="item.attackImg" :style="{background: item.attackBackground}">
              </router-link>
              <div>
                <p v-if="index == 0">城堡 {{ res.castleName }}</p>
                <p v-if="item.monkeyNickname && index">NPC</p>
                <p v-if="index > 0 && !item.monkeyNickname">#{{ item.monkeyId }}·{{ item.generation }}代</p>
                <p>攻:{{ item.aggressivity }}/HP:{{ item.weight | toFix(1) }}</p>
              </div>
            </div>
            <div class="text-right">
              <p>{{index == 0 ? '防御' : '输出'}}：{{ item.round }}回合（{{ item.damageValue | toFix(1) }}伤害）</p>
              <p><i class="herb" v-if="item.usedMagicHerb"></i> 剩余HP:{{ item.endWeight | toFix(1) }} <span :style="{color: color[item.endStatus]}">（{{status[item.endStatus]}}）</span></p>
            </div>
          </li>
        </ul>
      </div>
      <div class="replay" @click="getReplay()">战斗回放</div>
      <div class="get" v-if="res.reslut == 1 || res.attackerSpoils || res.captiveList.length > 0">
        <h4> — 攻城战利品 —</h4>
        <ul>
          <li v-if="res.reslut == 1">
            <img :src="res.castleImg" :style="{background: '#eafee1'}">
            <p>城堡</p>
          </li>
          <li v-if="res.attackerSpoils">
            <img :src="'/static/stone.png'" :style="{background: '#eafee1'}">
            <p>石头 *{{res.attackerSpoils}}</p>
          </li>
          <li v-for="(item,index) in res.captiveList" :key="index">
            <img :src="item.facade" :style="{background: item.background}">
            <p># {{item.id}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showScrollBox" hide-on-blur @on-hide="onBlur()" class="replay-dialog">
        <div class="content" ref="battle">
          <transition-group name="list" tag="ul">
            <li v-for="(item,index) in replay" :key="index">{{ item }}</li>
          </transition-group>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
  import {
    XDialog,
    TransferDom
  } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XDialog
    },
    data() {
      return {
        status: ['受伤', '俘虏', '死亡', '无伤', '重伤', '破防'],
        color: ['#ed1909', '#ffcc33', '#626161', '#42a55c', '#cd584a', '#3982ef'],
        res: null,
        id: '',
        showScrollBox: false,
        replay: [],
        timer: null
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.id = this.$route.query.id
        this.initData(this.id)
      });
    },
    watch: {
      replay() {
        this.$refs.battle.scrollTop = this.$refs.battle.scrollHeight;
      }
    },
    methods: {
      initData(id) {
        this.$http
          .get(`/gameCastle/attackDetail?attackId=${id}`)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      getReplay() {
        this.$http
          .get(`/gameCastle/attackDetailList?attackId=${this.id}`)
          .then(res => {
            if (res.code == 200) {
              this.showScrollBox = true;
              this.replay = []
              var replay = res.result;
              var len = replay.length;
              var i = 0;
              this.timer = setInterval(() => {
                this.replay.push(replay[i])
                // this.$refs.battle.scrollTop += 100
                if (i < len-1) {
                  i++
                } else {
                  clearInterval(this.timer)
                }
              }, 800);
            } else {}
          })
          .catch(function(error) {});
      },
      onBlur() {
        clearInterval(this.timer)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .battle {
    font-size: 12px;
    p {
      color: $gray;
    }
    .bat {
      display: flex;
      align-items: center;
      div {
        width: 33.33%;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        p {
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .attack p {
        color: #d0021b;
      }
      .defense p {
        color: #4a90e2;
      }
      img {
        width: 60px;
        height: 60px;
      }
      .result {
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .fight {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      margin-bottom: 10px;
      .left {
        display: flex;
        align-items: center;
      }
      img {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
      .text-right {
        text-align: right;
      }
      .herb {
        display: inline-block;
        background: url(/static/withherb.png) no-repeat 50%;
        background-size: contain;
        width: 15px;
        height: 15px;
        position: relative;
        top: 3px;
        left: -5px;
      }
    }
    .attack {
      color: #d0021b;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .defense {
      color: #4a90e2;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
  .get {
    text-align: center;
    font-size: 12px;
    color: $grey;
    ul {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      li {
        margin: 5px 10px;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .replay {
    text-align: center;
    width: 120px;
    margin: 20px auto;
    color: $link;
  }
  .replay-dialog {
    .content {
      min-height: 400px;
      max-height: 400px;
      overflow-y: scroll;
      padding-bottom: 100px;
      transition: all .5s;
      li {
        font-size: 12px;
        text-align: left;
        padding: 5px;
      }
      li:nth-child(odd) {
        background: #c2e8fb;
      }
    }
  }
  .list-enter-active,
  .list-leave-active {
    transition: all 1s;
  }
  .list-enter,
  .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
  {
    opacity: 0;
    transform: translateY(30px);
  }
</style>

<style lang="scss">
  .replay-dialog {
    .weui-dialog {
      width: 90%;
      max-width: 500px;
    }
  }
</style>

